<template>
  <el-button @click="handleAddPoint()">Add New Point</el-button>
  <el-button @click="handleSavePoint()">Save</el-button>
  <div class="real_scenes" ref="mapContent">
    <div ref="realEChart" id="real_scenes_content"></div>
  </div>
</template>

<!-- Vu2 ... -->
<script>
import MapGenerator from "./tools/MapGenerator.js";

export default {
  name: "test",
  data() {
    return {
      realEChart: null,
      mapData: [
      {
      coord: [396.243151570349, 99.47560419516641],
      data: [
        "NB-307",
        "DeskOccupancy_Presence",
        "1.0",
        "01/CLP/3/HR/CLPOcc_069/Presence",
      ],
      id: "70b3d52c0001ee64/CLPOcc_069",
      unitId: 0,
      draggable:false,
    },
    {
      coord: [364.0817373461012,99.47560419516641 ],
      data: [
        "SHT20",
        "DeskOccupancy_Presence",
        "0.0",
        "01/CLP/3/HR/CLPOcc_100/Presence",
      ],
      id: "70b3d52c0001ee60/CLPOcc_100",
      unitId: 0,
      draggable:false,
    },
      ]
      }
    },
    methods: {
    // 初始化
    initRealEChart() {
      const base64 = require("./svg/Overview.svg");
      const $chart = this.$refs.realEChart;
      this.realEChart = new MapGenerator($chart);
      this.realEChart.setSvg(base64);
      this.realEChart.setGraphicsDataArr(this.mapData);
    },
    // 监听窗口变化后重新set graphic
    chartResize() {
      this.$nextTick(() => {
        if (!this.$refs.realEChart) return;
        this.realEChart.resize();
        setTimeout(() => {
          this.setGraphicsDataArr(this.mapData);
        }, 100);
      });
    },
    setGraphicsDataArr(val) {
      this.realEChart.setGraphicsDataArr(val);
    },
    // 新增点位 往数组对象里push 一条
    handleAddPoint(){
        this.mapData.push(  {
      coord: [-10.851595987232201, -11.986895804833608],
      data: [
        "ADD TEST",
        "DeskOccupancy_Presence",
        "1.0",
        "01/CLP/3/HR/CLPOcc_069/Presence",
      ],
      id: "70b3d52c0001ee64/CLPOcc_069",
      unitId: 0,
      draggable:true
    },)
     setTimeout(() => {
          this.setGraphicsDataArr(this.mapData);
        }, 100);
    },
    // 保存时 取新增的数据 也就是 数组对象尾部数 然后重新渲染
    handleSavePoint(){
         console.log(this.mapData[this.mapData.length-1]);
         this.mapData[this.mapData.length-1].draggable = false
         this.setGraphicsDataArr(this.mapData);
    }
  },
  mounted() {
    this.initRealEChart();
    /* START 监听div大小变化，重绘echarts */
    const divElem = this.$refs.mapContent
    const resizeObserver = new ResizeObserver(() => {
      this.chartResize()
    });
    resizeObserver.observe(divElem)
  }
  }
</script>

<style lang="less">
.real_scenes {
  width: 100%;
  height: 700px;
  border: 1px solid red;
  #real_scenes_content {
    width: 100%;
    height: 100%;
  }
}
</style>
